<template>
    <a-modal
      title="设置用户角色"
      :width="640"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form" v-bind="formLayout">
          <a-form-item label="ID" style="display: none;">
            <a-input v-decorator="['id']" />
          </a-form-item>
          <a-form-item label="姓名">
            <a-input v-decorator="['realName', { rules: [{ required: true, message: '请输入姓名' }] }]" />
          </a-form-item>
          <a-form-item label="是否赋予角色">
            <a-radio-group v-decorator="['op', { rules: [{ required: true, message: '请选择' }]}]" @change="changeOp">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- <a-form-item label="选择角色" v-if="mdl.op===1">
            <a-select mode="multiple" v-decorator="['roleIds', { rules: [{ required: true, message: '请选择角色' }] }]" placeholder="请选择角色">
              <a-select-option :value="item.id" v-for="item in roleData" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item> -->
          <a-form-item label="选择角色" v-if="mdl.op===1">
            <a-select v-decorator="['roleId', { rules: [{ required: true, message: '请选择角色' }] }]" placeholder="请选择角色">
              <a-select-option :value="item.id" v-for="item in roleData" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-spin>
  
    </a-modal>
  </template>
  
  <script>
  import { roleList } from '@/api/role'
  import pick from 'lodash.pick'
  const fields = ['id', 'op', 'roleId', 'realName']
  
  export default {
    name: 'UserRole',
    data () {
      return {
        visible: false,
        formLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 }
          }
        },
        form: this.$form.createForm(this),
        mdl: {},
        roleData: [],
        confirmLoading: false
      }
    },
    created () {
      this.getRoleList()
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
      // 当 model 发生改变时，为表单设置值
      this.$watch('mdl', () => {
        if (this.mdl) {
          console.log(this.mdl)
          this.mdl.op = 1
          this.form.setFieldsValue(pick(this.mdl, fields))
        }
      })
    },
    methods: {
      getRoleList () {
        const that = this
        roleList({ page: 1, limit: 9999 }).then(res => {
          that.roleData = res.data.records
        })
      },
      changeOp (e) {
        this.mdl.op = e.target.value
      },
      handleOk () {
        this.$emit('ok')
      },
      handleCancel () {
        this.visible = false
        this.form.resetFields()
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>
  